.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}

body,
html {
    height: 100%;
}

.nav {
    width: 100%;
    .px2rem(height, 100);
    .px2rem(line-height, 100);
    background: #0092ff;
    display: flex;
    .px2rem(font-size, 40);
    font-weight: bold;
    color: #ffffff;
    justify-content: space-between;
    position: fixed;
    top: 0;
    z-index: 20;
    .left {
        padding-left: 10px;
    }
}

.banner {
    .px2rem(margin-top, 100);
    width: 100%;
    .px2rem(height, 550);
    .top {
        display: flex;
        .px2rem( height, 360);
        justify-content: space-between;
        .left {
            width: 50%; // .px2rem( height, 360);
            border: 1px solid #cccccc;
            box-sizing: border-box;
            position: relative;
            h2 {
                .px2rem(font-size, 35);
                color: #ff9900;
                .px2rem(padding-top, 60);
                .px2rem(padding-left, 20)
            }
            p {
                .px2rem(padding-top, 20);
                .px2rem(font-size, 30);
                color: #a6a6a6;
                .px2rem(padding-left, 20)
            }
            img {
                max-width: 20%;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        }
        .right {
            width: 50%;
            display: flex;
            flex-wrap: wrap;
            .top1 {
                width: 100%;
                .px2rem(height, 180);
                border: 1px solid #cccccc;
                box-sizing: border-box;
                position: relative;
                ul {
                    .px2rem(padding-left, 20);
                    li:first-child {
                        .px2rem(font-size, 35);
                        color: red;
                        .px2rem(padding-top, 50); // .px2rem(padding-left, 20);
                    }
                    li:last-child {
                        .px2rem(padding-top, 20);
                        .px2rem(font-size, 30);
                        color: #a6a6a6; // .px2rem(padding-left, 20);
                    }
                }
                img {
                    max-width: 16%;
                    position: absolute;
                    bottom: 10px;
                    right: 10px;
                }
            }
        }
    }
    .bot {
        display: flex;
        .top2 {
            width: 100%;
            .px2rem(height, 180);
            border: 1px solid #cccccc;
            box-sizing: border-box;
            position: relative;
            ul {
                .px2rem(padding-left, 20);
                li:first-child {
                    .px2rem(font-size, 35);
                    color: red;
                    .px2rem(padding-top, 50); // .px2rem(padding-left, 20);
                }
                li:last-child {
                    .px2rem(padding-top, 20);
                    .px2rem(font-size, 30);
                    color: #a6a6a6;
                }
            }
            img {
                max-width: 16%;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        }
    }
}

.img {
    width: 100%;
    .px2rem(height, 200);
    border-top: 5px solid #cccccc;
    border-bottom: 5px solid #cccccc;
    margin: 0;
    img {
        width: 100%;
        .px2rem(height, 200);
        margin: 0;
    }
}

// .foot {
//     display: flex;
.push {
    width: 100%;
    .px2rem(height, 600);
    border: 5px solid #cccccc;
    border-left: none;
    border-right: none;
    .tpush {
        width: 100%;
        .px2rem(height, 140);
        text-align: center;
        h2 {
            .px2rem(font-size, 40);
            font-weight: bolder;
            .px2rem(padding-top, 60);
        }
        P {
            .px2rem(font-size,20);
            .px2rem(padding-top, 5);
        }
    }
    .meishi {
        width: 100%;
        .px2rem(height, 360);
        display: flex;
        align-items: flex-start; // .px2rem(height, 365);
        .px2rem(height, 360);
        dl {
            // .px2rem(margin-top, 40);
            flex: 1;
            display: flex;
            flex-direction: column;
            .px2rem(height, 360);
            dt {
                img {
                    width: 90%;
                    .px2rem(height,250);
                }
            }
            dd {
                width: 100%;
                .px2rem(height,110);
                .px2rem(margin-top, 10);
            }
            .qian {
                color: red;
            }
            .qian1 {
                color: #cccccc;
                .px2rem(padding-left, 20);
                text-decoration: line-through;
            }
        }
    }
    .chakan {
        width: 100%;
        .px2rem(height, 100);
        text-align: center; // .px2rem(margin-top, 60);
        a {
            .px2rem(font-size, 30);
            color: #cccccc;
            font-weight: bolder;
            line-height: 3;
        }
    }
}

.time {
    .px2rem(margin-bottom, 100);
    border-bottom: none;
}

// }
.footer {
    .px2rem(height, 100);
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #ffffff;
    display: flex;
    border-top: 1px solid #cccccc;
    justify-content: space-around;
    text-align: center;
    align-items: center;
    dl {
        dt {
            .px2rem(font-size,60);
        }
        dd {
            .px2rem(font-size,24);
        }
    }
}